<template>
    <view class="columnbox wdh-100 content">
        <view class="rowbox  spb one-info">
            <view>加盟类型</view>
            <view class="columnbox" style="align-items: flex-end;">
                <view class="rowbox">
                    <view @click="changeJiaMeng(item)" v-for="(item,index) in type" :key='index' class="rowbox one-type"
                        :class="{'sel-type':curtype==item.value}">
                        {{item.title}}
                    </view>
                </view>
                <view class="rowbox" v-if="curtype > 0" style="margin-top: 20rpx;">
                    <view @click="curyy=item.value" v-for="(item,index) in yyType" :key='index' class="rowbox one-type"
                        :class="{'sel-type':curyy==item.value}">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>
        <view class="rowbox  spb one-info">
            <view>投资金额</view>
            <view class="rowbox">
                <picker @change="tzChange" :range="tz" range-key="name">
                    {{tz[joinCash].name}}
                </picker>
                <view style="margin-left: 20rpx;"> <u-icon name="arrow-down" size="24rpx"></u-icon></view>
            </view>
        </view>
        <view class="rowbox  spb one-info">
            <view>洗车形式</view>
            <view class="columnbox" style="align-items: flex-end;">
                <view class="rowbox">
                    <view @click="curxctype = item.value" v-for="(item,index) in xctype" :key='index'
                        class="rowbox one-type" :class="{'sel-type':curxctype==item.value}">
                        {{item.title}}
                    </view>
                </view>
                <view class="xichetype-desc" v-if="curxctype==0">用户自行洗车商家提供工具，门店仅需自助洗车位</view>
                <view class="xichetype-desc" v-else-if="curxctype==1">最低标准提供自动洗车机一台</view>
                <view class="xichetype-desc" v-else-if="curxctype==2">门店需人工洗车位+自动/自助洗车位</view>
                <view class="xichetype-desc" v-else-if="curxctype==3">门店需自助+自动+人工洗车位</view>
            </view>
        </view>
        <view class="rowbox  spb one-info">
            <view>加盟城市</view>
            <view class="rowbox">
                <!-- #ifdef MP -->
                <picker mode="region"  @change="regionChange">
                    {{showCity||'点击选择'}}
                </picker>
                <!-- #endif -->
                <view style="margin-left: 20rpx;"> <u-icon name="arrow-down" size="24rpx"></u-icon></view>
            </view>
        </view>
        <view class="rowbox  spb one-info" >
            <view>联系人</view>
            <input  v-model="contact" placeholder="请输入您的姓名" />
        </view>
        <view class="rowbox  spb one-info">
            <view>联系方式</view>
            <input  v-model="phone" placeholder="请输入手机号码" />
        </view>
        <view class="one-btn rowbox" @click="addApply">提交申请</view>
        <view class="notice-info">提交后会有工作人员联系，请保持电话畅通</view>
        <view class="document-box columnbox">
            <view class="d-title">加盟类型说明</view>
            <view class="wdh-100" style="margin-bottom: 20rpx;">
                同盟：自运营；由产权人自己运营和管理，只是能接受我摩卡兄弟平台的用户前去下单，按摩卡兄弟平台的收费标准计费，最后由摩卡兄弟平台与产权人结算；</view>
            <view class="wdh-100">加盟：自运营和委托运营（平台）；按摩卡兄弟平台的标准计费，按摩卡兄弟平台的标准配置相关的设施；</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: [{
                        title: '同盟',
                        value: 0
                    },
                    {
                        title: '加盟',
                        value: 1
                    }
                ],
                curtype: 0,
                yyType: [{
                        title: '自运营',
                        value: 0
                    },
                    {
                        title: '委托运营',
                        value: 1
                    }
                ],
                curyy: 0,
                xctype: [{
                        title: '旗舰站',
                        value: 0
                    }, {
                        title: '标准站',
                        value: 1
                    }, {
                        title: '自助站',
                        value: 2
                    },
                    {
                        title: '自动站',
                        value: 3
                    },
                ],
                curxctype: 0,
                tz: [{
                        name: '10~20万',
                        value: 0
                    },
                    {
                        name: '20~30万',
                        value: 1
                    },
                    {
                        name: '30~50万',
                        value: 2
                    }
                ],
                joinCash: 0,
                contact: '',
                phone: '',
                cityId: '',
                cityName: '',
                submitflag: false,
                showCity: ''
            };
        },
        methods: {
            //选择加盟类型
            changeJiaMeng(v) {
                this.curtype = v.value
                this.curyy = 0
            },
            regionChange(e) {
				console.log(e)
                this.cityName = e.detail.value[1]
                this.cityId = e.detail.code[1]
                this.showCity = e.detail.value[1]
            },
            tzChange(e) {
                this.joinCash = e.detail.value
            },
            addApply() {

                if (this.cityId == '') {
                    uni.showToast({
                        title: '请选择城市',
                        icon: 'none'
                    })
                } else if (this.contact == '') {
                    uni.showToast({
                        title: '请填写联系人',
                        icon: 'none'
                    })
                } else if (this.phone == '') {
                    uni.showToast({
                        title: '请填写联系方式',
                        icon: 'none'
                    })
                } else {
                    if (!this.submitflag) {
                        this.submitflag = true
                        uni.showLoading({
                            title: '正在提交'
                        })
                        this.$req.post('/xcx/join', {
                            "joinType": this.curtype,
                            "joinCash": this.joinCash,
                            "stationType": this.curxctype,
                            "opesType": this.curyy,
                            "contact": this.contact,
                            "phone": this.phone,
                            "cityId": this.cityId,
                            "cityName": this.cityName
                        }).then(res => {
                            uni.hideLoading()
                            this.submitflag = false
                            if (res.data.code == 200) {
                                uni.showModal({
                                    title: '提交申请成功',
                                    content: '请等待审核',
                                    success: () => {
                                        uni.navigateBack()
                                    }
                                })
                            } else {
                                uni.showModal({
                                    title: res.data.msg,
                                    success: () => {}
                                })
                            }
                        })
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        font-family: PingFang SC;
    }

    .one-info {
        width: 710rpx;
        padding: 32rpx 20rpx;
        border-bottom: #eef0f7 solid 1px;
        font-size: 28rpx;

        input {
            text-align: right;
            font-size: 28rpx;
        }
    }

    .one-type {
        font-size: 24rpx;
        border: #eef0f7 solid 1px;
        height: 70rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
    }

    .sel-type {
        background: #17698F;
        color: #fff;
    }

    .one-btn {
        background: #17698F;
        color: #fff;
        width: 710rpx;
        height: 90rpx;
        border-radius: 20rpx;
        margin-top: 40rpx;
        font-size: 28rpx;
    }

    .notice-info {
        font-size: 28rpx;
        margin-top: 20rpx;
    }

    .document-box {
        border-radius: 20rpx;
        background: #efefef;
        width: 710rpx;
        padding: 32rpx 32rpx;
        margin-top: 40rpx;
        font-size: 28rpx;
        margin-bottom: 20rpx
    }

    .d-title {
        font-size: 32rpx;
        width: 100%;
        margin-bottom: 20rpx;
    }

    .xichetype-desc {
        font-size: 24rpx;
        color: #6C6C6C;
        margin-top: 20rpx;
    }
</style>